// tab栏
var categorys_items = document.querySelectorAll('.categorys-items');
var categorys_items_layer = document.querySelectorAll('.categorys-items-layer');
// 排他
function page() {
    for (var i = 0; i < categorys_items_layer.length; i++) {
        categorys_items_layer[i].className = 'categorys-items-layer';
    }
};
for (var j = 0; j < categorys_items_layer.length; j++) {
    categorys_items[j].index = j;
    categorys_items[j].onmouseover = function() {
        page();
        categorys_items_layer[this.index].className = 'categorys-items-layer show';
    }
    categorys_items[j].onmouseout = function() {
        page();
    }
};

var arr = location.search.split('?')[1];
var arrx = arr.split('=')[1];
var dataobj = '';
var listy = '';
$.get('../mock/shouye.json', function(data) {
    var datas = data[0].shouye;
    for (var i = 0; i < datas.length; i++) {
        if (datas[i].good_id == arrx) {
            dataobj = datas[i];
        }
    };
    // 下方图片
    for (var key in dataobj.good_urls) {
        // console.log(dataobj.good_urls[key]);
        listy += `
        <li>
             <a href="">
                 <img src="${dataobj.good_urls[key]}" alt="" width="100%">
             </a>
        </li>
        `;
    };
    // console.log(listy);
    var imgsrc = `
    <div class="main">
          <!-- 放上面图片的小盒子 -->
          <div class="min">
              <a href="">
                  <img src="${dataobj.good_urls.nowurl}" alt="" width="100%">
              </a>
              <div class="mask"></div>
          </div>
          <div class="spec-list">
              <a href="javascript:void(0);" class="spec-prev">
                  <i>
                      < </i>
              </a>
              <!-- 放下面图片 -->
              <div class="spec-items">
                  <div class="tempWrap">
                      <ul class="list">
                          ${listy}
                      </ul>
                  </div>
              </div>
              <a href="javascript:void(0);" class="spec-next">
                  <i> > </i>
              </a>
          </div>
          <!-- 收藏 -->
          <div class="short-share">
              <div class="left-btn">
                  <div class="duibi">
                      <a href="">
                          <input type="checkbox" name="" id="">对比
                      </a>
                  </div>
                  <a href="" class="collection choose-btn-coll">
                      <span class="iconfont icon-xingxing"></span> 收藏(0)
                  </a>
              </div>
              <a href="" class="report fr ftx-05">
                  <em>举报</em>
              </a>
          </div>
      </div>
      <!-- 放大镜的盒子 -->
      <div class="max">
          <img src="${dataobj.good_urls.nowurl}" alt="" width="200%">
      </div>
    `;
    var jiaqian = `
    <form action="" method="post">
        <div class="name">
             ${dataobj.goods_title}
         </div>
         <div class="summary">
             <div class="summary-price-wrap">
                 <div class="s-p-w-wrap">
                     <div class="summary-item si-shop-price">
                         <!-- 商品价格 -->
                         <div class="si-tit">
                             商 城 价
                         </div>
                         <div class="si-warp">
                             <strong class="shop-price">
                             ${dataobj.goods_price}
                             </strong>
                             <span class="price-notify">降价通知</span>
                         </div>
                         <div class="si-warp on_vip_register">
                             <span class="iconfont icon-VIP-fill"></span>
                             <span>高级VIP可享超值优惠价 </span>
                             <span class="color-red">¥600</span>
                             <span class="onVipRegister">立即开通 >></span>
                         </div>

                     </div>
                     <!-- 市 场 价 -->
                     <div class="summary-item si-market-price">
                         <div class="si-tit">市 场 价</div>
                         <div class="si-warp">
                             <div class="m-price">${dataobj.goodsz_price}</div>
                         </div>
                     </div>
                     <div class="si-info">
                         <div class="si-cumulative">
                             累计评价
                             <em>0</em>
                         </div>
                         <div class="si-cumulative">
                             累计销量
                             <em>4</em>
                         </div>
                     </div>
                     <div class="si-phone-code">
                         <div class="qrcode-wrap">
                             <div class="qrcode_tit">
                                 手机购买
                                 <span class="iconfont icon-erweima"></span>
                             </div>
                         </div>
                     </div>
                     <!-- 领 券 -->
                     <div class="summary-item si-coupon">
                         <div class="si-tit">领 券</div>
                         <div class="si-warp">
                             <a class="J-open-tb">
                                 <div class="quan-item">
                                     <i class="i-left"></i> 满10减1
                                     <i class="i-right"></i>
                                 </div>
                             </a>
                             <a class="J-open-tb">
                                 <div class="quan-item">
                                     <i class="i-left"></i> 满100减1
                                     <i class="i-right"></i>
                                 </div>
                             </a>
                         </div>
                     </div>
                     <div class="clear"></div>
                 </div>
             </div>
         </div>
         <!-- 配送 -->
         <div class="summary-basic-info">
             <div class="summary-item is-stock">
                 <div class="si-tit">配送 </div>
                 <div class="si-warp">
                     <span class="initial-area">河南省</span>
                     <span>至</span>
                     <div class="store-selector">
                         <div class="text-select">
                             <div class="tit">
                                 <span>北京市 东城区 东华门街道</span>
                                 <span class="iconfont icon-jiantou-xia"></span>
                             </div>
                         </div>
                     </div>
                     <div class="store-warehouse">
                         <div class="isHas_warehouse_num">
                             <strong>有货</strong> ，下单后立即发货
                         </div>
                     </div>
                 </div>
                 <!-- 服务 -->
                 <div class="summary-item is-service">
                     <div class="si-tit">服务</div>
                     <div class="si-warp">
                         <div class="fl">
                             <a href="" class="link-red">商创自营</a> 发货并提供售后服务。
                         </div>
                         <div class="fl pl10">
                             <span class="gary">[ 免运费 ]</span>
                         </div>
                     </div>
                 </div>
                 <!-- 品牌 -->
                 <div class="summary-item is-brand">
                     <span class="si-tit">品牌</span>
                     <div class="si-warp">
                         <a href="">喜瑞</a>
                     </div>
                 </div>
                 <div class="summary-item is-brand">
                     <span class="si-tit">可用积分</span>
                     <div class="si-warp">
                         <a href="">0</a>
                     </div>
                 </div>
                 <div class="summary-item is-number">
                     <div class="si-tit">数量</div>
                     <div class="si-warp">
                         <div class="amount-warp">
                             <input type="text" class="text buy-num" name="number" value="1">
                             <div class="a-btn">
                                 <a href="" class="btn-add">
                                     <span class="iconfont icon-jiantou-shang"></span>
                                 </a>
                                 <a href="" class="btn-reduce btn-disabled">
                                     <span class="iconfont icon-jiantou-xia"></span>
                                 </a>
                             </div>

                         </div>
                         <span>
                             库存 &nbsp;
                             <em id="goods_attr_num">990</em>
                             &nbsp; 件
                         </span>
                     </div>
                 </div>
                 <div class="clear"></div>
             </div>
             <div class="summary-basic-info">
                 <div class="summary-item is-service">
                     <div class="si-tit">温馨提示</div>
                     <div class="si-warp gray">
                         <a href="javascript:;" class="label_url label_wrap ">
                             <img src="https://x.dscmall.cn/storage/data/goods/services_label/%E6%AD%A3%E7%A1%AE2.png" alt=""> 支持7天无理由退货1
                         </a>
                     </div>
                 </div>
             </div>

         </div>
         <div class="choose-btns ml60 ">
             <a href="" class="btn-buynow">
                 立即购买
             </a>
             <a href="javascript:;" class="btn-append">
                 <span class="iconfont icon-gouwuche"></span> 加入购物车
             </a>
         </div>
     </form>
    `;
    $('.product-wrap').html(jiaqian);
    $('.father').html(imgsrc);
    // 加入购物车储存的数据
    $('.btn-append').click(function() {
        alert('已加入购物车');
        $('.ping-prompt').css('display', 'none');
        $('.tip-inner').css('display', 'none');
        // gouwuche2(dataobj);
        gouwuche(dataobj);
    });

    // 放大镜
    $('.spec-next').click(function() {
        $('.list').css('left', '-60px');
    });
    $('.spec-prev').click(function() {
        $('.list').css('left', '0px');
    });
    $('.list li').hover(function() {
        // console.log($(this).children().children());
        $(this).css('border', '1px solid red')
        $('.min img').prop('src', $(this).children().children()[0].src);
        $('.max img').prop('src', $(this).children().children()[0].src);
    }, function() {
        $(this).css('border', '0px')
    });


    $('.min').mouseover(function() {
        $('.mask').css('display', 'block');
        $('.max').css('display', 'block')
    });

    $('.min').mousemove(function(e) {
        var minX = e.pageX - $('.min').offset().left;
        var minY = e.pageY - $('.min').offset().top;
        minX = minX - $('.mask')[0].offsetWidth / 2;
        minY = minY - $('.mask')[0].offsetHeight / 2;
        var maskMaxDisX = $('.min')[0].offsetWidth - $('.mask')[0].offsetWidth;
        var maskMaxDisY = $('.min')[0].offsetHeight - $('.mask')[0].offsetHeight;
        if (minX > maskMaxDisX) {
            minX = maskMaxDisX;
        } else if (minX < 0) {
            minX = 0;
        };
        if (minY > maskMaxDisY) {
            minY = maskMaxDisY;
        } else if (minY < 0) {
            minY = 0;
        };

        $('.mask').css('left', minX);
        $('.mask').css('top', minY);

        var ratioX = minX / maskMaxDisX;
        var ratioY = minY / maskMaxDisY;
        // console.log($('.max').children());
        $('.max').children().css('left', ratioX * ($('.max')[0].offsetWidth - $('.max').children()[0].offsetWidth));
        $('.max').children().css('top', ratioY * ($('.max')[0].offsetHeight - $('.max').children()[0].offsetHeight));

    });
    $('.min').mouseout(function() {
        $('.mask').css('display', 'none')
        $('.max').css('display', 'none')
    })

    // 算了又算

    $('.sprite-down').click(function() {
        $('.looks').css('top', '-185px')
    });
    $('.sprite-up').click(function() {
        $('.looks').css('top', '0px')
    });

});

function gouwuche(dataobj) {
    dataobj.buy_num = 1;
    // 添加的商品信息
    var cartGoods = dataobj;
    // 本地存储的数据
    var cartDatas = localStorage.getItem("cartDatas");
    // 页面上的购物车数据
    var cartListDatas = cartDatas ? JSON.parse(cartDatas) : [];
    // 商品是否存在
    var isGoods = cartListDatas.find(item => {
        // console.log(item);
        return item.good_id == cartGoods.good_id
    });
    // console.log(isGoods);
    // 如果条件存在--只增加数量即可
    if (isGoods) {
        for (let i = 0; i < cartListDatas.length; i++) {
            if (cartListDatas[i].good_id == cartGoods.good_id) {
                cartListDatas[i].buy_num += cartGoods.buy_num;
            }
        }
    } else {
        cartListDatas.push(cartGoods);
    };
    localStorage.setItem('cartDatas', JSON.stringify(cartListDatas));
    var gouwu = JSON.parse(localStorage.getItem("cartDatas"));
    console.log(gouwu);
    var arrgou = '';
    var youcegou = '';
    var arrnum = 0;
    var arrnum2 = 0;
    var arrnum3 = 0;
    for (var v = 0; v < gouwu.length; v++) {
        arrgou += `
                 <ul class="${gouwu[v].good_id}">
                     <li>
                         <div class="p-img">
                             <a href="">
                                 <img src="${gouwu[v].good_urls.nowurl}" alt="">
                             </a>
                         </div>
                         <div class="p-name">
                             <a href="">${gouwu[v].goods_title}</a>
                         </div>
                         <div class="p-number">
                             <span class="num">${gouwu[v].buy_num}</span>
                             <div class="count">
                                 <a href="" class="count-add">
                                     <i class="iconfont icon-xiajiantou"></i>
                                 </a>
                                 <a href="">
                                     <i class="iconfont icon-xiajiantou"></i>
                                 </a>
                             </div>
                         </div>
                         <div class="p-oper">
                             <div class="price">${Number(gouwu[v].goods_price.split('￥')[1]) * Number(gouwu[v].buy_num)}</div>
                             <a href="javascript:;" class="remove">删除</a>
                         </div>
                     </li>
                 </ul>
            `;
        youcegou += `
            <li class="cart_item last">
                <div class="cart_item_pic">
                    <a href="">
                        <img src="${gouwu[v].good_urls.nowurl}" alt=""></a>
                </div>
                <div class="cart_item_desc">
                    <a href="" class="cart_item_name">${gouwu[v].buy_num}</a>
                    <div class="lie">
                        <div class="cart_item_price">
                            <span class="cart_price">${Number(gouwu[v].goods_price.split('￥')[1]) * Number(gouwu[v].buy_num)}</span>
                        </div>
                    </div>
                    <div class="p-number">
                        <a href="" class="count-remove">
                            <em>-</em>
                        </a>
                        <span class="num">${gouwu[v].buy_num}</span>
                        <a href="" class="count-add">
                            <em>+</em>
                        </a>
                    </div>
                </div>
            </li>
            `;
        arrnum += Number(gouwu[v].buy_num);
        arrnum2 += Number(gouwu[v].goods_price.split('￥')[1]) * Number(gouwu[v].buy_num);
    };
    var arrgou2 = `
        <div class="p-total">共${arrnum}件商品  共计：${arrnum2}</div>
        <div class="btn-cart">去购物车</div>
        `;
    var youcegou2 = `
    <div class="cart_handler_header">
        <span class="cart_handler_left">共<span class="cart_num red">${arrnum}</span>件商品</span>
        <span class="cart_handler_right" ectype="cart_amount">¥${arrnum2}</span>
    </div>
    <a target="_blank" class="cart_go_btn" href="../pages/Process.html">去购物车结算</a>
        `;
    $('.settleup-content .mb').html(arrgou2);
    $('.cart_num').text(arrnum);
    $('.settleup-content .mc').html(arrgou);
    // 右侧购物车
    $('.ibar_cart_product ul').html(youcegou);
    $('.cart_handler').html(youcegou2);
    // 删除商品
    $('.remove').click(function() {
        $(this).parents('ul').remove();
        var namex = $(this).parents('ul').attr('class');
        // console.log(namex);
        var namexx = '';
        for (var d = 0; d < gouwu.length; d++) {
            if (gouwu[d].good_id == namex) {
                namexx = gouwu[d].good_id;
                gouwu.splice(d, 1);
            }
        };
        console.log(gouwu);
        localStorage.setItem("cartDatas", JSON.stringify(gouwu));
        gouwuccc();
    });
};
// gouwuche(dataobj);
// gouwuche(dataobj);
function gouwuccc() {
    var gouwu = JSON.parse(localStorage.getItem("cartDatas"));
    console.log(gouwu);
    var arrgou = '';
    var youcegou = '';
    var arrnum = 0;
    var arrnum2 = 0;
    var arrnum3 = 0;
    for (var v = 0; v < gouwu.length; v++) {
        arrgou += `
                 <ul class="${gouwu[v].good_id}">
                     <li>
                         <div class="p-img">
                             <a href="">
                                 <img src="${gouwu[v].good_urls.nowurl}" alt="">
                             </a>
                         </div>
                         <div class="p-name">
                             <a href="">${gouwu[v].goods_title}</a>
                         </div>
                         <div class="p-number">
                             <span class="num">${gouwu[v].buy_num}</span>
                             <div class="count">
                                 <a href="" class="count-add">
                                     <i class="iconfont icon-xiajiantou"></i>
                                 </a>
                                 <a href="">
                                     <i class="iconfont icon-xiajiantou"></i>
                                 </a>
                             </div>
                         </div>
                         <div class="p-oper">
                             <div class="price">${Number(gouwu[v].goods_price.split('￥')[1]) * Number(gouwu[v].buy_num)}</div>
                             <a href="javascript:;" class="remove">删除</a>
                         </div>
                     </li>
                 </ul>
            `;
        youcegou += `
            <li class="cart_item last">
                <div class="cart_item_pic">
                    <a href="">
                        <img src="${gouwu[v].good_urls.nowurl}" alt=""></a>
                </div>
                <div class="cart_item_desc">
                    <a href="" class="cart_item_name">${gouwu[v].goods_title}</a>
                    <div class="lie">
                        <div class="cart_item_price">
                            <span class="cart_price">${Number(gouwu[v].goods_price.split('￥')[1]) * Number(gouwu[v].buy_num)}</span>
                        </div>
                    </div>
                    <div class="p-number">
                        <a href="" class="count-remove">
                            <em>-</em>
                        </a>
                        <span class="num">${gouwu[v].buy_num}</span>
                        <a href="" class="count-add">
                            <em>+</em>
                        </a>
                    </div>
                </div>
            </li>
            `;
        arrnum += Number(gouwu[v].buy_num);
        arrnum2 += Number(gouwu[v].goods_price.split('￥')[1]) * Number(gouwu[v].buy_num);
    };
    var arrgou2 = `
        <div class="p-total">共${arrnum}件商品  共计：${arrnum2}</div>
        <div class="btn-cart">去购物车</div>
        `;
    var youcegou2 = `
    <div class="cart_handler_header">
        <span class="cart_handler_left">共<span class="cart_num red">${arrnum}</span>件商品</span>
        <span class="cart_handler_right" ectype="cart_amount">¥${arrnum2}</span>
    </div>
    <a target="_blank" class="cart_go_btn" href="../pages/Process.html">去购物车结算</a>
        `;
    $('.settleup-content .mb').html(arrgou2);
    $('.cart_num').text(arrnum);
    $('.settleup-content .mc').html(arrgou);
    // 右侧购物车
    $('.ibar_cart_product ul').html(youcegou);
    $('.cart_handler').html(youcegou2);
    // 删除商品
    $('.remove').click(function() {
        $(this).parents('ul').remove();
        var namex = $(this).parents('ul').attr('class');
        // console.log(namex);
        var namexx = '';
        for (var d = 0; d < gouwu.length; d++) {
            if (gouwu[d].good_id == namex) {
                namexx = gouwu[d].good_id;
                gouwu.splice(d, 1);
            }
        };
        console.log(gouwu);
        localStorage.setItem("cartDatas", JSON.stringify(gouwu));
        gouwuccc();
    });
};
gouwuccc();
// top切换1

$('.mcm-right').eq(0).css('display', 'block').$('.mcThree li').click(function() {
    $(this).addClass('curr').siblings().removeClass('curr');
    console.log($(this).parent().next().find('.mcm-right'));
    $(this).parent().next().find('.mcm-right').eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
});


// top切换1
$('.gm-tab li').click(function() {
    $(this).addClass('curr').siblings().removeClass('curr')
    $('.gm-f-item').eq($(this).index()).css('display', 'block').siblings().css('display', 'none')
});